<template>
<div>

  <!--头部-->
  <Header></Header>
  <!--头部-->
  <!--轮播宣传图-->
  <div class="banner">
    <el-image
        style="width: 100%; height: 100%;box-shadow: 1px 2px 5px #AFE9FD"
        src="https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/jobManager/banner.jpg"
        fit="fit">
    </el-image>
  </div>
  <!--轮播宣传图-->

  <!--文章咨询路径导航布局区-->
  <div class="article">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/index">{{channel.name}}</a></el-breadcrumb-item>
    </el-breadcrumb>
  </div>


  <!--新闻咨询布局区-->
  <div class="article">
    <el-row :gutter="20">
      <!--新闻咨询展示区-->
      <el-col :span="16">
       <!--新闻咨询的卡片区-->
        <el-card style="min-height: 1200px;overflow:visible;">
          <!-- 新闻咨询的卡片头-->
          <div slot="header" class="clearfix">
            <span>{{channel.name}}</span>
          </div>
          <!-- 新闻咨询的卡片头-->
          <!-- 新闻咨询的有序列表-->
          <ul class="list-content-block">
            <li  :key="item.id" v-for="(item,index) in dataList">
              <!--咨询标题（超链接）-->
              <router-link :to="`/front/newDetail/${item.id}`">
                <span>{{item.title}}</span>
              </router-link>
              <!--咨询标题（超链接）-->

                <!-- 咨询概要-->
              <div class="summary">
               {{item.summary}}
              </div>
              <!-- 咨询概要-->

              <!--新闻咨询文本说明区-->
              <div class="text">

                <!--新闻咨询文本说明 -->
                  <div class="caption">
                    <i class="el-icon-alarm-clock"></i>
                    <span>{{item.created}}</span>
                  </div>
                <!--新闻咨询文本说明 -->

                <!--新闻咨询文本说明 -->
                  <div class="caption">
                    <i class="el-icon-view"></i>
                    <span style="padding-left: 5px">298</span>
                  </div>
                <!--新闻咨询文本说明 -->
              </div>
              <!--新闻咨询文本说明区-->

            </li>

          </ul>
          <!-- 新闻咨询的有序列表-->

          <!--分页组件-->
          <el-pagination
              background
              :current-page="pagination.currentPage"
              :page-size="pagination.pageSize"
              :total="pagination.total"
              style="margin-top: 20px; text-align: center"
              :page-sizes="[10, 20, 50, 100]"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              layout="total,sizes, prev, pager, next, jumper">
          </el-pagination>
          <!--分页组件-->

        </el-card>
        <!--新闻咨询的卡片区-->
      </el-col>
      <!--文章咨询展示区-->

       <!--右侧展示区-->
      <el-col :span="8">

        <!--搜索的卡片区-->
        <el-row :gutter="20">
        <el-card style="height: 100%;;margin-bottom: 20px;">
          <!--搜索文章的卡片头-->
          <div slot="header" class="clearfix">
            <span>搜索 / Search</span>
          </div>
          <!--搜索文章的卡片头-->

           <!-- 搜索新闻咨询内容区域-->
          <div style="text-align: center">
            <!-- 搜索新闻咨询内容区域表单-->
            <el-form :inline="true" :model="pagination.queryParams" class="demo-form-inline">
              <el-form-item label="">
                <el-input
                    size="small"
                    placeholder="作者/标题/简要"
                    prefix-icon="el-icon-search"
                    v-model="pagination.queryParams.queryString">
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" type="primary"  icon="el-icon-search" @click="handleCurrentChange(1)">搜索</el-button>
              </el-form-item>
            </el-form>
            <!-- 搜索新闻咨询内容区域表单-->
          </div>
          <!-- 搜索新闻咨询内容区域-->

        </el-card>
        </el-row>
        <!--搜索的卡片区-->

        <!--咨询分栏选项卡区-->
        <el-row :gutter="20">
          <!--咨询分栏的卡片区-->
          <el-card style="height: 100%;margin-bottom: 20px;">
            <!--咨询分栏的卡片头-->
            <div slot="header" class="clearfix">
              <span>按照栏目查询信息</span>
            </div>
            <!--咨询分栏的卡片头-->
            <div>
              <ul class="hot">
                <li>
                  <router-link to="/detail/id" target="_blank">
                      就业新闻
                  </router-link>
                </li>

                <li>
                  <router-link to="/detail/id" target="_blank">
                      通知公告
                  </router-link>
                </li>

                <li>
                  <router-link to="/detail/id" target="_blank">
                      网站公示
                  </router-link>
                </li>

                <li>
                  <router-link to="/detail/id" target="_blank">
                      院系动态
                  </router-link>
                </li>
              </ul>
            </div>

          </el-card>
          <!--热点文章的卡片区-->
        </el-row>
        <!--咨询分栏选项卡区-->



        <!--热点文章的卡片区-->
        <el-row :gutter="20">
        <HotArticle></HotArticle>
        </el-row>
        <!--热点文章的卡片区-->


      </el-col>
      <!--右侧展示区-->
    </el-row>
  </div>
  <!--新闻咨询布局区-->


  <!--尾部-->
  <footer>
    <div class="article">
      <el-row>
        <el-col :span="8">
          <h3>就业手续办理</h3>
          <p>电话：&nbsp;&nbsp;&nbsp;18154622909<br>0771-86983084 </p>
          <p>邮箱：&nbsp;&nbsp;&nbsp;827376239@qq.com</p>
          <p>传真：&nbsp;&nbsp;&nbsp;0774-86981520</p>
        </el-col>
        <el-col :span="8">

          <h3>招聘单位服务</h3>
          <p>电话：   0532-86983082</p>
          <p>邮箱：   jiuye@wangnaixing.edu.cn</p>
          <p>传真：   0532-86981520</p>
        </el-col>
        <el-col :span="8">
          <h3>友情链接</h3>
          <ul>
            <li><a href="" target="_blank">XX学院就业官网</a></li>
            <li><a href="" target="_blank">XX市人社局</a></li>
            <li><a href="" target="_blank">XX校园招聘</a></li>
            <li><a href="" target="_blank">广西梧州人才专栏</a></li>
            <li><a href="" target="_blank">梧州学院本科招生网</a></li>
            <li><a href="" target="_blank">梧州学院研究生招生网</a></li>
          </ul>
        </el-col>
      </el-row>
    </div>
    <!--尾部-->
  </footer>
  <!--尾部-->

</div>
</template>

<script>

import '../assets/css/styles.css'
import Header from "@/front/inc/Header";
import Footer from "@/front/inc/Footer";

import HotArticle from "@/front/inc/HotArticle";
import {selectArticle,findByPage} from '@/api/article';
import {selectChannel} from '@/api/channel';

export default {
  name: "NewList",
  components: {HotArticle, Footer, Header},
  data() {
    return {
      pagination: {
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0,//总记录数
        queryParams: {
          channelId:1,
          queryString:""
        }//查询条件
      },//分页数据模型数
      channel:{},//栏目咨询分类
      dataList:[] //栏目咨询列表
    }

  },

  mounted() {
    this.selectChannel(this.$route.params.id)
    this.findArticleByPage()
  },
  beforeRouteUpdate (to, from, next) {
    this.selectChannel(to.params.id)
    this.findArticleByPage()
    next();
  },

  methods:{
    onSubmit(){},
    //根据ID获取栏目分类信息
    selectChannel(id){
      selectChannel(id).then(res=>{
        this.channel = res.data
      })

    },
    //根据栏目ID获取文章列表
     findArticleByPage(){
      this.pagination.queryParams.channelId = this.$route.params.id;
      findByPage(this.pagination).then(res=>{
        this.dataList = res.data.rows;
        this.pagination.total = res.data.total;
      })


    },
    //改变每页显示的条数
    handleSizeChange(pageSize) {
      //修改pagination.pageSize数据模型值，赋值为pageSize
      this.pagination.pageSize = pageSize
      //刷新表格
      this.findArticleByPage()
    },

    //切换页码
    handleCurrentChange(currentPage) {
      //修改pagination.currentPage数据模型值，赋值为currentPage
      this.pagination.currentPage = currentPage;
      //刷新表格
      this.findArticleByPage()
    },


  },

  computed: {
    loginState() {
      if (localStorage.getItem("token")) {
        return true;
      } else {
        return false;
      }
    }

  },


}
</script>

<style scoped>

</style>
